(function () {
  class PointLayer extends BaseLayer {
    constructor(config = {}) {
      super(config);
      this.minZoom = 10
      this.maxZoom = 25
      this.iconSize = .5;
      this.name =  'pointLayer'
      this.initLayer()
      this.imgList = [
        {
          name: 'marker',
          value: 'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
        }
      ]
      this.loadImage()
    }

    /**
     *
     * @param featrue 当前点击的feature
     * @param data 当前点击的feature data
     * @returns {string}
     */
    setTipHtml(featrue, data) {
      return `
        <div class="self_point_container"> 
            <div class="item">
                <span>名称：</span>
                <span>${data.name}</span>
            </div>
        </div>
      `
    }

    makeFeature(item) {
      let f = {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [item.x, item.y]
        },
        properties: {
          icon: item.icon,
          data: item
        }
      }
      return f
    }

    loadData() {
      this.cacheData = [
        {
          x: 121.71633684691017,
          y: 31.12696117301553,
          name: '点位1',
          icon: 'marker'
        }
      ]
      this.refreshLayer()

      this.waveLocation(this.layerSource._data.features[0], {
        duration: 4000,
        fly: true,
      })
    }
  }


  window.addEventListener('mapCreatedEvent', ev => {
    window.PointLayer = new PointLayer({
      name: 'pointLayer'
    })
    console.log(window.PointLayer)
  })
})();
